<template>
  <div class="cashback-detail">
      <h1 class="title"><span @click="goBack" class="blueFont">My Account</span> > <span>cashback details</span></h1>
      <div class="cashback-list">
        <h3 class="h3">Cashback details list</h3>
        <ul class="list-box">
          <li class="li clearfix" v-for="(item, index) in listData" :key="index" >
            <div class="img-box">
              <img v-lazy="imgUrl + item.image.src + '?x-oss-process=image/resize,h_500,limit_0'" ref="imgs" alt="" class="img">
            </div>
            <div class="goods-info">
              <h4 class="h4">{{item.headLine}}</h4>
              <div class="num-box"><span>Qty:</span><span class="num">1</span>
                <span class="time-show">{{item.lastModifiedTime.replace(/T/, " ").substring(0,16)}}</span>
              </div>
            </div>
            <div class="price-show">
              <p class="price1">${{item.price}}</p>
              <p class="price2"><span class="old-price">$${{item.originalPrice}}</span></p>
              <p class="price3"><span class="rebate-price">(Rebate) <span class="num-big">+${{item.totalRebate.amount}}</span></span></p>
            </div>
          </li>
          <li class="loading-container" v-show="Loading">
            <loading></loading>
          </li>
          <li v-show="noData" class="no-result-wrapper" ref="noDataEl">
            <no-data-show></no-data-show>
          </li>
        </ul>
      </div>
    <div class="common-page" v-show="hasMore">
      <pageination @changePage="changePages" :pages="totalPages"></pageination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import NoDataShow from "../../base/no-data-show/no-data-show";
  import Loading from '../../base/loading/loading'
  import pageination from 'base/pageination/pageination'
  import {TransferredOrders} from 'api/my-account'
    export default {
      data(){
        return{
          Loading: false,
          noData: false,
          listData:[],
          hasMore: false,
          PageNumber: 1,
          totalPages: 0,
        }
      },
      created(){
        this._TransferredOrders()
      },
      methods:{
        goBack(){
          this.$router.push({//
            path: '/my-account'
          });
        },
      _TransferredOrders(){
          this.Loading = true
          TransferredOrders(this.PageNumber).then((res) => {
            this.Loading = false
            if (res.data && res.data.length > 0) {
              this.totalPages = res.totalPages
              this.listData = res.data
            }
            this._checkMore(res.data)
          })
      },
        changePages(num) {
          this.listData = []
          this.PageNumber = num
          this._TransferredOrders()
        },
      _checkMore(data) {
        if (data.length === 10){
          this.hasMore = true
        }else{
          this.hasMore = false
        }
        if(data.length=== 0){
          this.noData = true
        }
      }
      },
      components:{
        NoDataShow,
          Loading,
        pageination,
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .cashback-detail
    width:100%;
    margin:0 auto;
    padding-bottom:70px
    .title
      font-size: 16px;
      line-height: 90px;
      color: #333333
      .blueFont
        color:#289fee
        cursor:pointer
    .cashback-list
      border:1px solid #dcdcdc
  .h3
    height: 40px;
    line-height:40px
    background-color: #f6f7f8;
    padding-left:18px;
    font-size:18px;
    color:#333
  .list-box
    .li
      padding: 20px 30px 20px 20px;
      border-top:1px solid #dcdcdc
      font-size: 18px;
      .img-box
        width: 250px
        padding-right:30px;
        background #fff
        text-align center
        float:left
        .img
          max-width:250px
          max-height:184px
          vertical-align: middle;
      .goods-info
        color:#333
        width: 497px;
        float:left
        .h4
          width:100%;
          line-height:30px
          font-size: 20px;
          text-overflow: -o-ellipsis-lastline;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        .num-box
          margin-top:60px;
          font-size: 20px;
          position:relative
          span
            vertical-align middle
          .num
            margin-left: 15px;
          .time-show
            position:absolute
            right:0
            top: 40px;
            font-size:16px;
      .price-show
        width:250px
        float:right
        text-align right
        color:#333
        .price1
          font-size:30px
          line-height:50px
        .price2
          margin-top: 10px;
          .old-price
            text-decoration:line-through
            color:#98999a
        .price3
          margin-top: 72px;
          .rebate-price
            color:#fa4c4d
            font-size:18px;
            .num-big
              font-size:26px;
        .btn
          width: 160px;
          height: 53px;
          color:#fff
          border:none
          font-size:18px
          border-radius: 2px
          cursor:pointer
        .block-bg
          background-color: #000
        .red-bg
          background-color:#fa4c4d
  .no-result-wrapper
    width: 100%
    height:100%
  .loading-container
    width: 100%
    height: 276px;
    padding-top: 192px;
  .common-page
    margin-top 68px
    margin-bottom 76px
</style>
